html {
  background-color: lightblue;
}
html .mainBox {
  position: relative;
  margin: 40px auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}
html .mainBox .circleBox {
  position: absolute;
  left: 50%;
  top: 0;
  perspective: 70px;
  transform-style: preserve-3d;
  margin-left: -5px;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  transform-origin: center 80px;
}
html .mainBox .circleBox::before, html .mainBox .circleBox::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
html .mainBox .circleBox::before {
  top: -100%;
  background-color: #000;
  animation: blackMove 2s linear infinite;
}
@keyframes blackMove {
  0% {
    transition-timing-function: ease-in;
  }
  25% {
    transform: translate3d(0, 100%, 10px);
    transition-timing-function: ease-out;
  }
  50% {
    transform: translate3d(0, 200%, 0);
    transition-timing-function: ease-in;
  }
  75% {
    transform: translate3d(0, 100%, -10px);
    transition-timing-function: ease-out;
  }
}
html .mainBox .circleBox::after {
  top: 100%;
  background-color: #fff;
  animation: whiteMove 2s linear infinite;
}
@keyframes whiteMove {
  0% {
    transition-timing-function: ease-in;
  }
  25% {
    transform: translate3d(0, -100%, -10px);
    transition-timing-function: ease-out;
  }
  50% {
    transform: translate3d(0, -200%, 0);
    transition-timing-function: ease-in;
  }
  75% {
    transform: translate3d(0, -100%, 10px);
    transition-timing-function: ease-out;
  }
}
html .mainBox .circleBox:nth-child(1) {
  transform: rotate(0deg);
}
html .mainBox .circleBox:nth-child(1)::before, html .mainBox .circleBox:nth-child(1)::after {
  animation-delay: 0s;
}
html .mainBox .circleBox:nth-child(2) {
  transform: rotate(10deg);
}
html .mainBox .circleBox:nth-child(2)::before, html .mainBox .circleBox:nth-child(2)::after {
  animation-delay: -0.3333333333s;
}
html .mainBox .circleBox:nth-child(3) {
  transform: rotate(20deg);
}
html .mainBox .circleBox:nth-child(3)::before, html .mainBox .circleBox:nth-child(3)::after {
  animation-delay: -0.6666666667s;
}
html .mainBox .circleBox:nth-child(4) {
  transform: rotate(30deg);
}
html .mainBox .circleBox:nth-child(4)::before, html .mainBox .circleBox:nth-child(4)::after {
  animation-delay: -1s;
}
html .mainBox .circleBox:nth-child(5) {
  transform: rotate(40deg);
}
html .mainBox .circleBox:nth-child(5)::before, html .mainBox .circleBox:nth-child(5)::after {
  animation-delay: -1.3333333333s;
}
html .mainBox .circleBox:nth-child(6) {
  transform: rotate(50deg);
}
html .mainBox .circleBox:nth-child(6)::before, html .mainBox .circleBox:nth-child(6)::after {
  animation-delay: -1.6666666667s;
}
html .mainBox .circleBox:nth-child(7) {
  transform: rotate(60deg);
}
html .mainBox .circleBox:nth-child(7)::before, html .mainBox .circleBox:nth-child(7)::after {
  animation-delay: -2s;
}
html .mainBox .circleBox:nth-child(8) {
  transform: rotate(70deg);
}
html .mainBox .circleBox:nth-child(8)::before, html .mainBox .circleBox:nth-child(8)::after {
  animation-delay: -2.3333333333s;
}
html .mainBox .circleBox:nth-child(9) {
  transform: rotate(80deg);
}
html .mainBox .circleBox:nth-child(9)::before, html .mainBox .circleBox:nth-child(9)::after {
  animation-delay: -2.6666666667s;
}
html .mainBox .circleBox:nth-child(10) {
  transform: rotate(90deg);
}
html .mainBox .circleBox:nth-child(10)::before, html .mainBox .circleBox:nth-child(10)::after {
  animation-delay: -3s;
}
html .mainBox .circleBox:nth-child(11) {
  transform: rotate(100deg);
}
html .mainBox .circleBox:nth-child(11)::before, html .mainBox .circleBox:nth-child(11)::after {
  animation-delay: -3.3333333333s;
}
html .mainBox .circleBox:nth-child(12) {
  transform: rotate(110deg);
}
html .mainBox .circleBox:nth-child(12)::before, html .mainBox .circleBox:nth-child(12)::after {
  animation-delay: -3.6666666667s;
}
html .mainBox .circleBox:nth-child(13) {
  transform: rotate(120deg);
}
html .mainBox .circleBox:nth-child(13)::before, html .mainBox .circleBox:nth-child(13)::after {
  animation-delay: -4s;
}
html .mainBox .circleBox:nth-child(14) {
  transform: rotate(130deg);
}
html .mainBox .circleBox:nth-child(14)::before, html .mainBox .circleBox:nth-child(14)::after {
  animation-delay: -4.3333333333s;
}
html .mainBox .circleBox:nth-child(15) {
  transform: rotate(140deg);
}
html .mainBox .circleBox:nth-child(15)::before, html .mainBox .circleBox:nth-child(15)::after {
  animation-delay: -4.6666666667s;
}
html .mainBox .circleBox:nth-child(16) {
  transform: rotate(150deg);
}
html .mainBox .circleBox:nth-child(16)::before, html .mainBox .circleBox:nth-child(16)::after {
  animation-delay: -5s;
}
html .mainBox .circleBox:nth-child(17) {
  transform: rotate(160deg);
}
html .mainBox .circleBox:nth-child(17)::before, html .mainBox .circleBox:nth-child(17)::after {
  animation-delay: -5.3333333333s;
}
html .mainBox .circleBox:nth-child(18) {
  transform: rotate(170deg);
}
html .mainBox .circleBox:nth-child(18)::before, html .mainBox .circleBox:nth-child(18)::after {
  animation-delay: -5.6666666667s;
}
html .mainBox .circleBox:nth-child(19) {
  transform: rotate(180deg);
}
html .mainBox .circleBox:nth-child(19)::before, html .mainBox .circleBox:nth-child(19)::after {
  animation-delay: -6s;
}
html .mainBox .circleBox:nth-child(20) {
  transform: rotate(190deg);
}
html .mainBox .circleBox:nth-child(20)::before, html .mainBox .circleBox:nth-child(20)::after {
  animation-delay: -6.3333333333s;
}
html .mainBox .circleBox:nth-child(21) {
  transform: rotate(200deg);
}
html .mainBox .circleBox:nth-child(21)::before, html .mainBox .circleBox:nth-child(21)::after {
  animation-delay: -6.6666666667s;
}
html .mainBox .circleBox:nth-child(22) {
  transform: rotate(210deg);
}
html .mainBox .circleBox:nth-child(22)::before, html .mainBox .circleBox:nth-child(22)::after {
  animation-delay: -7s;
}
html .mainBox .circleBox:nth-child(23) {
  transform: rotate(220deg);
}
html .mainBox .circleBox:nth-child(23)::before, html .mainBox .circleBox:nth-child(23)::after {
  animation-delay: -7.3333333333s;
}
html .mainBox .circleBox:nth-child(24) {
  transform: rotate(230deg);
}
html .mainBox .circleBox:nth-child(24)::before, html .mainBox .circleBox:nth-child(24)::after {
  animation-delay: -7.6666666667s;
}
html .mainBox .circleBox:nth-child(25) {
  transform: rotate(240deg);
}
html .mainBox .circleBox:nth-child(25)::before, html .mainBox .circleBox:nth-child(25)::after {
  animation-delay: -8s;
}
html .mainBox .circleBox:nth-child(26) {
  transform: rotate(250deg);
}
html .mainBox .circleBox:nth-child(26)::before, html .mainBox .circleBox:nth-child(26)::after {
  animation-delay: -8.3333333333s;
}
html .mainBox .circleBox:nth-child(27) {
  transform: rotate(260deg);
}
html .mainBox .circleBox:nth-child(27)::before, html .mainBox .circleBox:nth-child(27)::after {
  animation-delay: -8.6666666667s;
}
html .mainBox .circleBox:nth-child(28) {
  transform: rotate(270deg);
}
html .mainBox .circleBox:nth-child(28)::before, html .mainBox .circleBox:nth-child(28)::after {
  animation-delay: -9s;
}
html .mainBox .circleBox:nth-child(29) {
  transform: rotate(280deg);
}
html .mainBox .circleBox:nth-child(29)::before, html .mainBox .circleBox:nth-child(29)::after {
  animation-delay: -9.3333333333s;
}
html .mainBox .circleBox:nth-child(30) {
  transform: rotate(290deg);
}
html .mainBox .circleBox:nth-child(30)::before, html .mainBox .circleBox:nth-child(30)::after {
  animation-delay: -9.6666666667s;
}
html .mainBox .circleBox:nth-child(31) {
  transform: rotate(300deg);
}
html .mainBox .circleBox:nth-child(31)::before, html .mainBox .circleBox:nth-child(31)::after {
  animation-delay: -10s;
}
html .mainBox .circleBox:nth-child(32) {
  transform: rotate(310deg);
}
html .mainBox .circleBox:nth-child(32)::before, html .mainBox .circleBox:nth-child(32)::after {
  animation-delay: -10.3333333333s;
}
html .mainBox .circleBox:nth-child(33) {
  transform: rotate(320deg);
}
html .mainBox .circleBox:nth-child(33)::before, html .mainBox .circleBox:nth-child(33)::after {
  animation-delay: -10.6666666667s;
}
html .mainBox .circleBox:nth-child(34) {
  transform: rotate(330deg);
}
html .mainBox .circleBox:nth-child(34)::before, html .mainBox .circleBox:nth-child(34)::after {
  animation-delay: -11s;
}
html .mainBox .circleBox:nth-child(35) {
  transform: rotate(340deg);
}
html .mainBox .circleBox:nth-child(35)::before, html .mainBox .circleBox:nth-child(35)::after {
  animation-delay: -11.3333333333s;
}
html .mainBox .circleBox:nth-child(36) {
  transform: rotate(350deg);
}
html .mainBox .circleBox:nth-child(36)::before, html .mainBox .circleBox:nth-child(36)::after {
  animation-delay: -11.6666666667s;
}/*# sourceMappingURL=style.css.map */